<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简易音乐播放器的制作——实现歌曲的点击切换</title>
    <link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
<div id="app">
    <!--切换音乐需要将 src 属性设置为目标值-->
    <audio v-bind:src="songSrc" controls></audio>

    <ul>
        <li v-for="(item, index) in musics" v-on:click="changeMusic(index)"
            v-bind:class="{active: index === currentIndex }">
            <h3>{{ item.id}} - {{ item.name }}</h3>
            <p>歌手：{{ item.author }}</p>
        </li>
    </ul>
</div>

<script type="module" src="index.js">

</script>
</body>
</html>